<template>
  <div class="box_b">
    <div :id="chartId" :style="{ width, height }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import dayjs from 'dayjs'
export default {
  name: 'BoxMidC',
  props: {
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    },
    msg: String
  },
  created() {
    this.calculateNumber()
  },
  mounted() {
    this.initEchart()
    window.addEventListener('resize', this.handleUpdateSize())
    this.intervalIns = setInterval(() => {
      this.calculateNumber()
      this.setOptions()
    }, 2000)
  },
  activated() {
    this.echart?.resize()
  },
  data() {
    return {
      chartId: this.randomNum(),
      echart: null,
      curData: [0, 0, 0, 0, 0, 0],
      intervalIns: null
    }
  },
  methods: {
    randomNum() {
      let num = ''
      for (let i = 0; i < 10; i++) {
        num += Math.floor(Math.random() * 100)
      }
      return num
    },
    initEchart() {
      const chartDom = document.getElementById(this.chartId)
      if (!this.echart) {
        this.echart = echarts.init(chartDom)
      } else {
        this.echart.clear()
      }
      this.setOptions()
    },
    setOptions() {
      var className = ['新大陆', '惠尔丰', '烽火通信', '海外', '联达兴', '亿联']
      var colorList = [
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#0363f2' },
          { offset: 0.25, color: '#2880f2' },
          { offset: 0.5, color: '#0bc8ea' },
          { offset: 1, color: '#8dfdfb' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#766a44' },
          { offset: 0.25, color: '#a79453' },
          { offset: 0.5, color: '#e4d975' },
          { offset: 1, color: '#ece279' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#17655b' },
          { offset: 0.25, color: '#158577' },
          { offset: 0.5, color: '#42d6c3' },
          { offset: 1, color: '#7af7e7' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#0c7ddc' },
          { offset: 0.25, color: '#59b3ff' },
          { offset: 0.5, color: '#58a5e6' },
          { offset: 1, color: '#8ec6f6' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#24aaa3' },
          { offset: 0.25, color: '#29b9a4' },
          { offset: 0.5, color: '#37e8a5' },
          { offset: 1, color: '#39e582' }
        ]),
        new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          { offset: 0, color: '#0363f2' },
          { offset: 0.25, color: '#37abd1' },
          { offset: 0.5, color: '#4ab9de' },
          { offset: 1, color: '#7cd4f1' }
        ])
      ]
      var backgroundCor = [
        'rgba(19, 112, 163, 0.8)',
        'rgba(108, 133, 136, 0.7)',
        'rgba(19, 112, 163, 0.6)',
        'rgba(22, 123, 210, 0.6)',
        'rgba(19, 112, 163, 0.9)',
        'rgba(22, 123, 210, 0.6)'
      ]
      var defaultData = [100, 100, 100, 100, 100, 100, 100]
      const icon1 =
        'image://'
      const icon2 =
        'image://'
      const icon3 =
        'image://'
      // const icon4 =
      //   "image://";
      let option = {
        grid: {
          left: '1%',
          right: '1%',
          bottom: '-10%',
          top: '5%',
          containLabel: true
        },
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: {
        //         type: 'none'
        //     },
        //     formatter: function(params) {
        //         return params[0].name + '<br/>' +
        //             params[0].seriesName + ' : ' + params[0].value + "%"
        //     }
        // },
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '16'
              }
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            data: className
          },
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                color: 'rgba(255, 255, 255, 0.5)',
                fontSize: '12'
              },
              formatter: function (value) {
                return value + ' %'
              }
            },
            data: this.curData
          }
        ],
        series: [
          {
            name: '新大陆',
            type: 'pictorialBar',
            symbol: icon1,
            symbolSize: [20, 19],
            symbolOffset: [6, 0],
            z: 12,
            zlevel: 10,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data: this.getSymbolData(0)
          },
          {
            name: '惠尔丰',
            type: 'pictorialBar',
            symbol: icon2,
            symbolSize: [20, 19],
            symbolOffset: [6, 0],
            z: 12,
            zlevel: 10,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data: this.getSymbolData(1)
          },
          {
            name: '烽火通信',
            type: 'pictorialBar',
            symbol: icon3,
            symbolSize: [20, 19],
            symbolOffset: [6, 0],
            z: 12,
            zlevel: 10,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data: this.getSymbolData(2)
          },
          {
            name: '海外',
            type: 'pictorialBar',
            symbol: icon2,
            symbolSize: [20, 19],
            symbolOffset: [6, 0],
            z: 12,
            zlevel: 10,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data: this.getSymbolData(3)
          },
          {
            name: '联达兴',
            type: 'pictorialBar',
            symbol: icon3,
            symbolSize: [20, 19],
            symbolOffset: [6, 0],
            z: 12,
            zlevel: 10,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data: this.getSymbolData(4)
          },
          {
            name: '亿联',
            type: 'pictorialBar',
            symbol: icon2,
            symbolSize: [20, 19],
            symbolOffset: [6, 0],
            z: 12,
            zlevel: 10,
            itemStyle: {
              normal: {
                color: 'rgba(255, 255, 255, 0.3)'
              }
            },
            data: this.getSymbolData(5)
          },
          {
            name: '安全指数',
            type: 'bar',
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: (params) => {
                  return colorList[params.dataIndex]
                }
              }
            },
            barWidth: 12,
            data: this.curData
          },
          {
            name: '背景',
            type: 'bar',
            barWidth: 12,
            barGap: '-100%',
            data: defaultData,
            itemStyle: {
              normal: {
                barBorderRadius: [5, 5, 5, 5],
                color: (params) => {
                  return backgroundCor[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      this.echart.setOption(option)
    },
    getSymbolData(index) {
      let arr = []
      for (var i = 0; i < this.curData.length; i++) {
        arr.push({
          value: i == index ? this.curData[i] : 0,
          symbolPosition: 'end'
        })
      }
      return arr
    },
    calculateNumber() {
      this.curData = [70, 58, 50, 61, 68, 43]
      return
      // let hour = dayjs().hour();
      // if (hour >= 8 && hour < 10) this.curData = [21, 18, 30, 25, 17, 28];
      // else if (hour >= 10 && hour < 13) this.curData = [42, 44, 52, 34, 37, 50];
      // else if (hour >= 13 && hour < 15) this.curData = [57, 62, 65, 55, 58, 70];
      // else if (hour >= 15 && hour < 17) this.curData = [82, 79, 72, 89, 80, 90];
      // else this.curData = [100, 98, 99, 95, 100, 98];
    },
    handleUpdateSize() {
      this.echart?.resize()
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleUpdateSize())
    if (this.intervalIns) clearInterval(this.intervalIns)
  }
}
</script>
<style scoped>
.box_b {
  height: 200px;
}
</style>
